Program Imagery and Character Recommendations

Imagery and language work together within a program to create a unique experience that gets a user's attention, conveys a message, and elicits an emotional response. We recommend using these elements to help users understand their progress within a program as an individual, a group, and part of a community.

The following are recommended image sizes and character limits for blocks and web components. These guidelines help to display images appropriately and eliminate word wrapping and truncation. In a customized program, sizing and character limits can be adjusted to fit your design.

Note: Nitro supports Roboto and Nunito fonts. Other supported fonts vary based on browser, operating system, and theme.

Element	Recommended Size	Use
Imagery
Badge, mission icon, level icon	400x400px (max file size of 500KB)	Impact block - Mission icons display on the mission tile. If no mission icon is set, a default is used (show me ). Badges display in the detail view rewards section. Missions web component - Mission icons display with the mission description. If no mission icon is set, a default is used (show me). Badges display in the detail view rewards section. Trophy case web component - Badges and level icons display with the mission description. Events web component - Badges, mission icons, and level icons display with the action phrase when a user completes a mission or changes levels. The events feed includes the action phrase plus an image. The image order is 1) the badge image or 2) the mission icon or 3) the default mission icon. When the event is a level change, the web component uses the level icon and action phrase unless your configuration does not include them. Learn more Typically, the badge is used as the mission image. If no badge is awarded, a mission icon is used. A mission icon can be specific to a mission, be used for a group of missions, or be one image that is used as the default for all non-badge missions.
User/Profile image	400x400px (max file size of 500KB) Supports PNG, JPEG, and GIF when added via Nitro Studio. Supports PNG and JPEG when added via the Profile web component.	The user image displays in the user's profile, leaderboards, and recognition. Learn more For the Profile and Leaders web components, user images are pulled from: 1 - The image set in the userPhotoUrl user preference or 2 - The level image (which will change as the user moves through levels) or 3 - The default profile icon For Impact and Recognitions blocks, user images are pulled from: 1 - The image set in the userPhotoUrl user preference or 2 - The user's initials (when a name is set) or 3 - The default profile icon
Mission background image and Default Featured Mission image	2000x2000px (max file size of 1MB) Flexible, center-orientated or forgiving crop	Impact block - The background image displays in the mission tile. If no background image is set, a gradient displays that can be styled to your brand standards. If you have no featured missions available, a default image and description can be set to display in the Featured section until a mission becomes available.
Point category icons	60x60px (max size 500KB) We recommend using a minimalistic design in a color that displays best on mission tiles with background images and without. In most cases, a white icon is preferred unless you're using very light colors in the gradient background.	Impact block - Point category icons display in place of the point category name in mission tiles, leaderboards, etc. The point category order is: 1 - The point category icon or 2 - The short name or 3 - The full name
Group image	400x400px (max file size of 500KB)	Impact block and Leaders web component - A personalized group image displays with the group name in leaderboards. The image is set in the group's properties.
Recognition category icons	400x400px	Category icons display: Recognitions block - in the recognition detail Recognitions web component - with the category's action phrases
Quiz banner/Intro image	600x150px Although the height can be any size, using an image of 150px or less keeps the quiz's Get Started! button above the fold.	Quiz web component - A banner image displays between the quiz name and description.
Text Elements
Mission and Level names and descriptions	Mission name - 50 characters or less Mission description - 250 characters or less	Impact block, Missions web component, and Trophy Case web components - Names and descriptions tell users about a mission and what they should do to complete it. Short, but informative descriptions are recommended.
Action phrases	200 characters or less	Events and Recognition web components - Action phrases describe an activity a user has completed. Use the mission Action Phrase, level Action phrase, and recognition Community/Giver/Recipient Phrase fields to describe the activity that occurred.
Rule descriptions	40 characters or less	Impact block and Missions web component - Descriptions describe the task the user must complete.
Point category name	10 characters or less	Impact block - Displays when no point category icon or short name are set.
Point category short name	3 characters or less	Impact block - Displays when no point category icon is set.
User name		Impact block - A user name personalizes the greeting, leaderboard, and other areas in the program. Profile web component - A user name personalizes the user's profile. The userId is used if no name preference is set. Events web component - When you use tokens within an action phrase, the user's name (first, last, or initial) is used to personalize the activity.
Web component titles	30 characters or less	All web components - By default web component titles display in all caps. Quiz web component - The quiz's name appears as the web component title.
Bunchball Go Elements
Banner	600x338px (max file size of 500MB)	A banner image displays on the Home page introducing your program or communicating program updates.
Content link images	100x100px (responsive design sizes at a range between 70 to 93px)	The images to display with static content links.
Header image	120x40px	The image to display as your company or program logo.
Program icon	512x512px Must be a PNG	An icon for your program that users will see on their mobile device's home screen when Bunchball Go runs as a Progressive Web Application.